<template>
    <div>
        <el-card style="margin-top: 10px;">
            <el-dialog
              title="问题反馈"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
              </span>
            </el-dialog>
           <el-table
               :data="tableData"
               border
               style="width: 100%">
               <el-table-column
                 prop="number"
                 label="凭证号码">
               </el-table-column>
               <el-table-column
                 prop="name"
                 label="货物名称">
               </el-table-column>
               <el-table-column
                 prop="norms"
                 label="规格">
               </el-table-column>
               <el-table-column
                 prop="unit"
                 label="单位">
               </el-table-column>
               <el-table-column
                 prop="drawNumber"
                 label="实提数量">
               </el-table-column>
               <el-table-column
                 prop="collectNumber"
                 label="实收数量">
               </el-table-column>
               <el-table-column
                 prop="lossNumber"
                 label="缺少数量">
               </el-table-column>
               <el-table-column
                 prop="damage"
                 label="运损情况">
               </el-table-column>
               <el-table-column
                 prop="pay"
                 label="到付">
               </el-table-column>
               <el-table-column
                 label="回执单照片">
                 <template slot-scope="scope">
                    <el-image
                          class="imgStyle"
                          :src="scope.row.url"
                          :preview-src-list="[scope.row.url]">
                    </el-image> 
                 </template>
               </el-table-column>
               <el-table-column
                 fixed="right"
                 width="200"
                 prop="name"
                 label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" icon="el-icon-view" @click="finish(scope.row)">确认完单</el-button>
                     <el-button type="text" icon="el-icon-edit" style="color: #E6A23C;" @click="deal(scope.row)">问题反馈</el-button>            
                 </template>
               </el-table-column>
           </el-table>
           <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="current"
                 :page-sizes="[2, 5, 10, 20]"
                 :page-size="size"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import request from '../../utils/request.js'
     export default {
        data() {
          return {
            tableData: [],
            current:1,
            size:2,
            total:0,
            textarea:'',
            dialogVisible: false,
            form:{}
          }
        },
        methods:{
            handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            load() {
                request.get("/orderReturn/getAllReturn?current=" + this.current + "&size=" + this.size).then(res=>{
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            deal(val) {
              this.form = val;
              this.dialogVisible = true;
            },
            update() {
                this.form.mark = this.textarea;
                request.post("/orderReturn/question", this.form).then(res=>{
                    if (res.code == 200) {
                        this.$message.success("问题反馈成功");
                        this.load();
                        this.dialogVisible = false;
                    }
                })
            },
            finish(val) {
                this.$confirm('您是否确认该订单无误要完成订单?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    request.post("/orderReturn/finish", val).then(res=>{
                      if (res.code === 200) {
                          this.$message({
                            type: 'success',
                            message: '完单成功!'
                          });
                           // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                          const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                          this.current = this.current > totalPage ? totalPage : this.current;
                          this.current = this.current < 1 ? 1 : this.current;
                          this.load();
                      }  
                    })
                    
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '取消完单'
                  });          
                });
            }
        },
        mounted() {
            this.load();
        }
      }
</script>

<style scoped>
    .imgStyle {
        width: 120px;
        height: 80px;
    }
</style>
